<template>
  <view class="content-box-app">
    <view class="weui-search-bar">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <picker :value="status" mode="selector" @change="statusChange" :range="statusList" range-key="label">
            <view class="uni-input">{{ statusName }}</view>
          </picker>
        </view>
      </view>
      <view class="weui-search-bar__cancel-btn global-button-bg" style="margin-right: 7rpx" @click="searchFn">搜索</view>
      <view class="weui-search-bar__cancel-btn global-button-bg" @click="resetForm">重置</view>
    </view>
    <view class="content-wrap">
      <view class="item-box-wrap global-linear-bg" v-for="(item, index) in datSource" :key="item.id">
        <view class="status" :class="{
            'status-success': item.status === 1,
            'status-danger': item.status === 2
          }">{{ statusText(item.status) }}</view>
        <view class="item-wrap">
          <text>提醒时间：</text>
          <view>{{ item.notifyTime | formatData }}</view>
        </view>
        <view class="item-wrap">
          <text>排号编号：</text>
          <view>{{ item.lineupNo }}</view>
        </view>
        <view v-if="item.queueType" class="item-wrap">
          <text>排队类型：</text>
          <view>{{ item.queueType===1?'采购':'销售' }}</view>
        </view>
        <view class="line"></view>
        <view class="item-wrap">
          <text class="content-label">提醒内容：</text>
          <view class="content-value">{{ item.notifyContent }}</view>
        </view>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
  import { toast } from '@/utils/common';
  import { notifyRecordList } from '@/api/system/wallet.js';
  import { timestampToChineseTime } from '@/utils/common.js';
  import { getDictDatas } from '@/api/me.js';
  export default {
    data() {
      return {
        statusList: [],
        status: null,
        statusName: '请选择状态',
        datSource: [],
        isMore: 'more',
        queryParam: {
          pageNo: 1,
          pageSize: 10
        }
      };
    },
    computed: {
      statusText() {
        return (value) => {
          return (
            this.statusList.find((e) => e.value === value?.toString())?.label ||
            ''
          );
        };
      }
    },
    filters: {
      formatData(date) {
        return timestampToChineseTime(date);
      }
    },
    mounted() {
      this.datSource = [];
      this.getDictDatas();
      this.getList();
    },
    onPullDownRefresh() {
      this.queryParam.pageNo = 1;
      this.isMore = 'more';
      this.datSource = [];
      this.getList();
    },
    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getList();
      }
    },
    methods: {
      statusChange(e) {
        const obj = this.statusList[e.detail.value];
        this.status = obj?.value;
        this.statusName = obj?.label;
      },
      resetForm() {
        this.status = null;
        this.statusName = '请选择状态';
      },
      searchFn() {
        this.datSource = [];
        this.getList();
      },
      async getDictDatas() {
        const res = await getDictDatas();
        if (res.code === 0) {
          this.statusList = res.data.filter(
            (e) => e.dictType === 'call_notify_status'
          );
        }
      },
      async getList() {
        try {
          const data = this.queryParam;
          if (this.status) {
            data['status'] = [this.status];
          } else {
            data['status'] = [];
          }
          const res = await notifyRecordList(data);
          if (res.code == 0) {
            const result = res.data.list || [];
            this.datSource = [...this.datSource, ...result];
            if (res.data.total == this.datSource.length) {
              this.isMore = 'noMore';
            } else {
              this.isMore = 'more';
            }
          } else {
            toast(res.msg || '接口查询失败');
          }
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        } catch (e) {
          return false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .status-success {
    color: #27b57d;
    background: rgba(39, 181, 125, 0.1);
    border: 1px solid rgba(39, 181, 125, 0.7);
  }

  .status-danger {
    color: #ff4d4f;
    background: rgba(255, 77, 79, 0.08);
    border: 1px solid rgba(255, 77, 79, 0.4);
  }

  .item-wrap+.item-wrap {
    margin-top: 17.78rpx;
  }

  .item-wrap {
    display: flex;

    text {
      white-space: nowrap;
    }
  }

  .content-box-app {
    font-size: 14px;
    overflow: auto;

    .weui-search-bar {
      padding: 18rpx 10rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1rpx solid #e5e5e5;
      position: relative;
      background-color: #fff;
      font-size: 24.88rpx;
    }

    .weui-search-bar__form {
      border-radius: 5px;
      background: #ffffff;
      width: 100%;
      margin: 0 10rpx 0 17rpx;
    }

    .weui-search-bar__box {
      padding: 0 10rpx;
      width: 100%;
      box-sizing: border-box;
      z-index: 1;
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 7rpx;
      background-color: #f1f2f5;

      picker {
        .uni-input {
          color: #333;
        }
      }
    }

    .weui-search-bar__cancel-btn {
      line-height: 60rpx;
      color: #fff;
      white-space: nowrap;
      padding: 6rpx 15rpx;
      border-radius: 8rpx;
      text-align: center;
    }

    .weui-search-bar__cancel-btn:first-child {
      margin-right: 7rpx;
    }

    .content-wrap {
      margin-top: 8rpx;

      .item-box-wrap {
        position: relative;
        margin-bottom: 1px;
        padding: 35.56rpx 17.78rpx;
        margin: 0 2%;
        margin-bottom: 15rpx;
        border-radius: 8rpx;
        font-size: 14px;
        color: #666666;

        .line {
          width: 100%;
          height: 1px;
          margin: 17.78rpx 0;
          background: #e6e6e6;
        }

        .status {
          position: absolute;
          right: 26.67rpx;
          top: 35.56rpx;
          width: 46px;
          height: 26px;
          line-height: 26px;
          border-radius: 4px;
          text-align: center;
        }

        .content-label {
          color: #000000;
          font-weight: 600;
        }

        .content-value {
          color: #343434;
        }
      }
    }
  }
</style>